{{extends file='layout.tpl'}}
{{block name=title}}首页{{/block}}
{{block name=head}}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
body{
	background: url('{{R('img')}}bg.png') fixed;
}
.wrap{
	width: 936px;
	margin: 0 auto;
}
@media screen and (max-width: 1000px) {
.wrap{
	width: 780px;
}
}
@media screen and (max-width: 720px) {
.wrap{
	width: 624px;
}
}
@media screen and (max-width: 480px) {
.wrap{
	width: 312px;
}
}
.bg0{
	background-color: #1ba1e2;
}
.bg0:hover{
	background-color: #55b5e3;
}
.bg1{
	background-color: #a05000;
}
.bg1:hover{
	background-color: #9e6934;
}
.bg2{
	background-color: #339933;
}
.bg2:hover{
	background-color: #539653;
}
.bg3{
	background-color: #a2c139;
}
.bg3:hover{
	background-color: #abc061;
}
.bg4{
	background-color: #d80073;
}
.bg4:hover{
	background-color: #d35699;
}
.bg5{
	background-color: #f09609;
}
.bg5:hover{
	background-color: #eaae50;
}
.app{
	margin: 3px;
	padding: 3px;
	float: left;
	overflow: hidden;
	transition: all 0.5s;
	color: #fff;
}
.app:hover{
	outline: 2px solid #000000;
}
.app1{
	width: 144px;
	height: 144px;
}
.app2{
	width: 300px;
	height: 144px;
	float: left;
}
.app4{
	width: 300px;
	height: 300px;
	float: left;
}
.main{
	margin-top: 60px;
}
.apps{
	overflow: hidden;
}

.user{
	background-color: #898989;
	width: 300px;
}
.avatar{
	float: left;
	margin: 3px;
}
.avatar img{
	border: 4px solid #fff;
}
.uinfo{
	height: 196px;
}

.uinfo .sub{
	margin: 3px;
	width: 160px;
	height: 189px;
	overflow: hidden;
	float: left;
}
.user .sub p{
	background-color: #fff;
	border-left: 5px solid #0073c5;
	color: #000;
	padding: 5px 0 5px 10px;
	margin-top: 6px;
}
.user .sub p a{
	color: #000;
	text-decoration: none;
}
.user .menu{
	width: 100%;
	height: 100px;
}
.user .menu li{
	float: left;
	margin: 3px;
	width: 94px;
	height: 94px;
	list-style: none;
}
.user .menu a{
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 1.2em;
	width: 100%;
	height: 100%;
	line-height: 94px;
	vertical-align: middle;
	text-align: center;
	background-color: #696767;
}
.user .menu li a:hover{
	background-color: #000;
}
.user .menu a b{
	background-color: #514f4f;
	padding: 1px 6px;
}
</style>
{{/block}}
{{block name='main'}}
<div class="wrap">
	<!-- APPS -->
	<div class="apps">
		<div class="app app4 user" style="float:right">
		{{if not is_login()}}
			<ul class="menu">
				<li><a href="{{U('login')}}">登陆</a></li>
				<li><a href="{{C('env.bbs')}}/member.php?mod=register">注册</a></li>
			</ul>
		{{else}}
			<div class="uinfo">
				<div class="avatar"><img src="{{C('env.uc.api')}}/avatar.php?uid={{session('user.uid')}}&type=real&size=mid" alt=""></div>
				<div class="sub">
					<p>{{session('user.username')}}</p>
					<p><a href="###">修改个人信息</a></p>
					<p><a href="{{U('login/index/logout')}}">退出</a></p>
				</div>
			</div>
			<ul class="menu">
				<li><a href="###">信息<b>1</b></a></li>
				<li><a href="###">邮箱<b>2</b></a></li>
				{{if is_admin()}}
				<li><a href="###">后台管理</a></li>
				{{/if}}
			</ul>
		{{/if}}
		</div>
		<div class="app app2 bg0" onclick="location='{{C('env.bbs')}}'">论坛</div>
		<div class="app app1 bg1" onclick="location='http://git.oschina.net/gitoisc/QMXPLATFORM-2.0'">本项目网址</div>
		<div class="app app1 bg2" onclick="location='{{C('env.domain')}}/doc'">开发文档</div>
		<div class="app app2 bg3">
			<p class="title">消息</p>
			<p id="message"></p>
		</div>
		<div class="app app2 bg5"></div>
		{{do_action('index_apps')}}
	</div>
</div>
{{/block}}

{{block name=js}}
<script type="text/javascript">
//消息轮询
;$(function(){
	setInterval(function(){
		{{do_action('API_INDEX_POLLING')}}
		console.log('polling');
	}, 3000);
})
</script>
{{/block}}